<template>
	<view class="list-box">
		<view class="list-item" v-for="shop in shopping" :key="shop.id" @click="navigator(shop.id)">
			<view class="list-item-thumb"><image :src="shop.thumb"></image></view>
			<view class="item-text-box">
				<text class="list-item-title">{{shop.title}}</text>
				<view class="item-info-box">
					<text class="item-price">￥{{shop.price}}</text>
					<text class="item-pay-num">{{shop.city}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['shopping'],
		methods:{
			navigator(id){
				this.$emit("shoppingItemsClick",id)
			}
		}
	}
</script>

<style>
.list-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 10px;
		padding: 5px;
	}
	.list-item{
		border: 1px solid #f5f2f2;
		box-sizing: border-box;
		width: 48%;
		margin: 5px 0;
		box-shadow: 0px 1px 0px #f5f2f2;
	}
	.list-item .list-item-thumb{
		margin: 5px auto;
		width: 170px;
		height: 170px;
		box-sizing: border-box;
	}
	
	.list-item .list-item-thumb image{
		width: 100%;
		height: 100%;
	}
	.item-text-box{
		padding: 5px;
	}
	.list-item-title{
		font-size: 14px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.item-info-box{
		display: flex;
		justify-content: space-between;
		padding: 5px 0;
		height: 24px;
		line-height: 24px;
	}
	.item-price{
		font-size: 16px;
		color: #f6630a;
	}
	.item-pay-num{
		font-size: 12px;
		color: #989898;
	}
</style>
